import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, ScrollView, Pressable } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { useNavigation } from '@react-navigation/native';
const ChooseplateBoard = () => {
  const navigation = useNavigation();
  const [searchQuery, setSearchQuery] = useState('');
  const categories = [
    {
      name: '求助',
      bgc: '#EC7B75',
      subcategories: [
        { name: '身边趣事', iconName: 'chatbubbles', boardexplain:'用于分享你身边真实、有趣、温暖的见闻。不可滥用此分类，无意义的水贴会被删除乃至封禁！'},
        { name: '创作分享', iconName: 'arrow-undo-sharp' , boardexplain:'用于分享你或授权的有益大众的经验或内容'},
        { name: '吐槽爆料', iconName: 'flash' , boardexplain:'谨慎用此分类，侵犯他人权益的会被删帖与封禁'},
        { name: '时事新闻', iconName: 'newspaper' , boardexplain:'发前请善用搜索，须以图、文或链接等形式声明来源。禁止转载外网新闻，禁止政治敏感信息，一经发现，直接封禁'},
        { name: '情感', iconName: 'heart' , boardexplain:'用于分享亲情、友情、爱情中的酸甜苦辣'},
        { name: '朵朵有嘻哈', iconName: 'headset' , boardexplain:'请尽量保证所发的段子或搞笑图近期在此板块未发布过'},
        { name: '电子游戏', iconName: 'game-controller' , boardexplain:'禁止求群和拉群！'},
      ],
    },
    {
      name: '求助',
      bgc: '#41B8B4',
      subcategories: [
        { name: '学业疑难', iconName: 'library' , boardexplain:'禁止代课、代签到、代写作业、代考等内容。本版严禁出售及求购书籍资料！'},
        { name: '日常生活', iconName: 'partly-sunny' , boardexplain:'请务必确保已尽量使用不同的关键词组合搜索过类似问题，本版不可发布求购帖，必须发布在物品所属板块'},
        { name: '寻物招领', iconName: 'storefront' , boardexplain:'格式：实物描述+时间地点  涉及的隐私信息，如照片、身份证号码等需要打码哟~证件类请务必将失主全名打在正文里'},
      ],
    },
    {
      name: '招聘',
      bgc: '#5D80D1',
      subcategories: [
        { name: '学习顾问', iconName: 'person-add' , boardexplain:'学生介绍+具体要求+具体薪资（不可面议） 薪资过低引起争议的，可能会被删除乃至封禁。请发布前搜索了解历史内容，获取市场行情价格'},
        { name: '全职', iconName: 'person' , boardexplain:'具体要求+具体薪资'},
        { name: '实习', iconName: 'timer' , boardexplain:'具体要求+具体薪资'},
        { name: '短期兼职', iconName: 'school' , boardexplain:'具体要求+具体薪资'},
      ],
    },
    {
      name: '闲置 · 讨论 · 求购',
      bgc: '#564E5D',
      subcategories: [
        { name: '免费赠送', iconName: 'gift' , boardexplain:'赠送你不需要的物品给他人'},
        { name: '鞋服包饰', iconName: 'bag' , boardexplain:'格式：名称+原价+售价+使用情况+其他描述'},
        { name: '美妆护肤', iconName: 'shirt' , boardexplain:'格式：名称+原价+售价+使用情况+其他描述'},
        { name: '书籍资料', iconName: 'book' , boardexplain:'格式：列出详细的闲置书籍目录，会获取更大的曝光流量，并标注价格  本类帖子由于数量过多，不会出现在首页时间线中'},
        { name: '电子数码', iconName: 'phone-portrait' , boardexplain:'格式：名称+原价+售价+使用情况+其他描述'},
        { name: '生活百货', iconName: 'bag-remove' , boardexplain:'格式：名称+原价+售价+使用情况+其他描述 不得在此板块发布书籍类闲置'},
        { name: '电器家具', iconName: 'tv' , boardexplain:'格式：名称+原价+售价+使用情况+其他描述'},
        { name: '食品饮料', iconName: 'fast-food' , boardexplain:'格式：名称+原价+售价+使用情况+其他描述'},
        { name: '运动健身', iconName: 'barbell' , boardexplain:'格式：名称+原价+售价+使用情况+其他描述'},
        { name: '票卡服务', iconName: 'card' , boardexplain:'格式：名称+原价+售价+使用情况+其他描述 禁止买卖发票！'},
        { name: '租房合租', iconName: 'business' , boardexplain:'格式：地址+配套设施+价格+其他描述'},
      ],
    },
  ];

  return (
    <ScrollView style={styles.container}>
      {/* 内容分类 */}
      {categories.map((category, index) => (
        <View key={index} style={styles.categorySection}>
          <View style={[styles.categoryTitleContainer, { backgroundColor: category.bgc }]}>
            <Text style={styles.categoryTitle}>{category.name}</Text>
            <Text style={styles.categoryTitle}>____</Text>
          </View>
          <View style={styles.subcategoryContainer}>
            {category.subcategories.map((subcategory, subIndex) => (
              <Pressable key={subIndex} style={styles.subcategoryItem}
              onPress={() => navigation.navigate('SearchPlateContent', {
                boardName: subcategory.name,
              })}
              >
                <Ionicons name={subcategory.iconName} size={16} color="#EB7A76" />
                <Text style={styles.subcategoryText}>{subcategory.name}</Text>
              </Pressable>
            ))}
          </View>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F7F7F7',
    paddingTop: 5,
  },
  categorySection: {
    flexDirection: 'row',
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 5,
  },
  categoryTitleContainer: {
    flexDirection: 'column',
    width: '30%',
    backgroundColor: '#EDEDED',
    display: 'flex',
    borderTopLeftRadius: 5,
    borderBottomLeftRadius: 5,
    // justifyContent: "center",
    // alignItems: "center",
  },
  categoryTitle: {
    // backgroundColor: '#fff',
    // height: 30,
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
    paddingLeft: 10,
    // paddingTop: 5,
    // marginBottom: 5,
    // alignItems: 'center',
  },
  subcategoryContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: '70%',
    // justifyContent: 'space-between',
    // paddingLeft: 10,
  },
  subcategoryItem: {
    backgroundColor: '#fff',
    flexDirection: 'row',
    height: 40,
    width: '50%',
    alignItems: 'center',
    // justifyContent: 'center',
    borderTopWidth: 1,
    borderRightWidth: 1,
    // borderLeftWidth: 1,
    borderColor: '#F7F7F7',
    borderStyle: 'solid',
    paddingLeft: 20,
  },
  subcategoryText: {
    // color: '#333',
    // fontSize: 13,
  },
});

export default ChooseplateBoard;